<template>
<el-row :gutter="20" class="overviewOfAssets">
    <el-col :span="12">
        <div class="echarts1" ref="echarts1">
        </div>
    </el-col>
    <el-col :span="12">
        <div class="echarts2" ref="echarts2">
        </div>
    </el-col>
    <el-col :span="24">
        <div class="echarts3" ref="echarts3">
        </div>
    </el-col>
    <el-col :span="24" style="margin-top:20px">
        <div class="search">
                <span>模糊搜索：</span>
                <div>
                    <el-input v-model="search" placeholder="请输入" @keyup.enter.native='onSubmit'></el-input>
                    <el-button type="primary" @click="onSubmit" icon="el-icon-search"></el-button>
                </div>
        </div>
    </el-col>
    <el-col :span="24">
        <div class="tablePart">
            <lpj-table-vue :tableData="tableData" :tableHeaderData="tableHeaderData" @pointerClick="pointerClick"></lpj-table-vue>
            <div>
                <pagination v-if="paginationMes.total&&paginationMes.total>10" align="right" :paginationMes="paginationMes" @sizeChangeFn="sizeChangeFn" @currentChangeFn="currentChangeFn"></pagination>
            </div>
        </div>
    </el-col>
</el-row>
</template>

<script>
 /* eslint-disable */ 
import {getMapData,getAssetsList} from "./api"
import {numToMoneyField } from "@/libs/utils"//千分符
import LpjTableVue from "@/components/LpjTableVue"
import Pagination from "@/components/Pagination"
export default {
    name:"overviewOfAssets",
    components:{
        LpjTableVue,
        Pagination
    },
    data(){
        return {
            tableHeaderData:[ /**table表头数据 */
                { prop: "image_url", label: "图片" },
                { prop: "asset_no", label: "资产编号",pointer:true},
                { prop: "asset_name", label: "资产名称",sortable:true },
                { prop: "price", label: "金额",sortable:true },
                { prop: "asset_status_name", label: "状态",filters:[] },
                { prop: "storage_time", label: "入库时间",sortable:true },
                { prop: "cate_name", label: "分类",filters:[] },
                { prop: "belongs_department", label: "所属部门",filters:[] },
            ],
            /*table里的数据 */
            tableData:[],
            paginationMes:{current_page:1,per_page:10}, /**操作列表分页参数 */
            search:'',/**查询字段 */
            option1:{ /**图1 的配置 */
                icon:'pin', 
                // tooltip: { /*鼠标放在图形上触发显示信息 */
                //     trigger: 'item',
                //     formatter: "{a} <br/>{b}"
                // },
                 title : { /*题目 */
                    text: '资产使用总览',
                    x:'left',
                    top:20,
                    left:20,
                },
                legend: { /*标签 */
                    orient: 'vertical',
                    right: '6%',
                    top:'middle',
                    bottom: 20,
                    selectedMode:false,
                    data:[]
                },
                series: [  /*主题设置 */
                    {
                        name:'资产',
                        type:'pie',/**饼图*/
                        radius: ['50%', '70%'],
                        center:['35%','50%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:[]
                    }
                ],
                color:['#15BC83','#FEE151', '#3296FA','rgb(252,46,84)','#5155CF','#FF943E','#51EFC3','#4E44FF']
            },
            option2:{  /**图2 的配置 */
                title : [{text: '资产分类占比',x:'left', top:20,left:20},{text: '',top:20,right:20 }],
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    type: 'scroll',
                    right: 20,
                    left:20,
                    bottom: 20,
                    data:[] ,
                    selectedMode:false,
                },
                series : [
                    {
                        name: '资产分类占比',
                        type: 'pie',
                        radius : '55%',
                        center: ['40%', '50%'],
                         label: {
                                normal: {
                                    formatter: '{d}% {b} ￥{c}元',
                                    position: 'outside'
                                }
                            },
                        data:[],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ],
                color:['#4FED87','#1856FF','#D13DF9','#58F31B','#5155CF','#FF943E','#51EFC3','#4E44FF','#F841FD','#576A95',
                '#A7F216','#FEE151','#59EDF5','#973FFE','#FF3095','#F4F116' ,'#51E1FC','#4CED3B','#3CBFFC','#FF2950','#15BC83', '#3296FA','#8F81F8','#F25643']
            },
            option3:{ /**图3 的配置 */
                title : {
                    text: '部门总数（）',
                    x:'left',
                    top:20,
                    left:20,
                },
                color: ['rgba(50, 150, 250, 1)'],
                tooltip : {
                    // trigger: 'axis',
                    // axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    //     type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    // }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            show: false,
                            interval:0,
                        },
                        axisLabel:{
                            rotate :45
                        }
                    },
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: false
                        },
                        axisTick:{//坐标轴刻度的设置
                            show:false
                        }
                    }
                ],
                series : [
                    {
                        name:'部门资产',
                        type:'bar',
                        barWidth: '60%',
                        barMaxWidth:'100px',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        data:[]
                    }
                ]
            },
        }
    },
    methods:{
        /**初始化图表*/
        initEcharts(){
            let echarts1 = this.$echarts.init(this.$refs.echarts1)
            let echarts2 = this.$echarts.init(this.$refs.echarts2)
            let echarts3 = this.$echarts.init(this.$refs.echarts3)
            echarts1.setOption(this.option1);
            echarts2.setOption(this.option2);
            echarts3.setOption(this.option3);
        },
        /**窗口大小变化，echarts变化事件 */
        resizeInitEcharts(){
            let echatrs1 = this.$echarts.init(this.$refs.echarts1);
            echatrs1.resize();
            let echarts2 = this.$echarts.init(this.$refs.echarts2)
            echarts2.resize();
            let echarts3 = this.$echarts.init(this.$refs.echarts3)
            echarts3.resize();
        },
        /*分页传过来的 当前第几页 */
        currentChangeFn(val){
            this.paginationMes.current_page=val
            this.onSubmit()
        },
        /*分页传过来的 table每页的条数 */
        sizeChangeFn(val){
            this.paginationMes.current_page = 1
            this.paginationMes.per_page=val
            this.onSubmit()
        },
        /**获取资产总览数据并赋值 */
        getAssetViewFN(){
            getMapData().then(data=>{
                let legend111 = [];
                let data111 = [];
                data.assets_use_overview.map(item=>{
                    legend111.push(item.name +' '+ item.percentage + '%') 
                    data111.push({value:item.percentage, name:item.name + ' '+ item.percentage+'%'})
                })
                this.option1.legend.data = legend111
                this.option1.series[0].data = data111



                let legend222 = [];
                let data222 = [];
                data.assets_category.map(item=>{
                    legend222.push(item.cate_name) 
                    data222.push({value:item.price, name:item.cate_name})
                })
                this.option2.legend.data = legend222
                this.option2.series[0].data = data222
                this.option2.title[1].text = '资产总额：'+numToMoneyField(data.assets_total)
                this.option2.tooltip.formatter = (params)=>{
                    let htmlcon1 = `<div>
                                <p>${params.seriesName}</p>
                                <p>${params.name} : ${numToMoneyField(params.data.value)} (${params.percent}%)</p>
                                </div>`;
                    return htmlcon1;
                }
                this.option2.series[0].label.normal.formatter = (params)=>{
                    let htmlcon2 = `${params.name} : ${numToMoneyField(params.data.value)} (${params.percent}%)`;
                    return htmlcon2;
                }


                let legend333 = [];
                let data333 = [];
                data.assets_department.map(item3=>{
                    legend333.push(item3.name) 
                    data333.push(item3.count)
                })
                this.option3.title.text = `部门总数(${data.assets_department_count})`
                this.option3.xAxis[0].data = legend333
                this.option3.series[0].data = data333
               
                 this.$nextTick(() => {
                    this.initEcharts();
                });
            })
        },
        /**查询资产 */
        onSubmit(){
            log(this.paginationMes)
            getAssetsList({pageSize:this.paginationMes.per_page,searchKey:this.search,page:this.paginationMes.current_page}).then(res=>{
                this.paginationMes = {total:Number(res.total),per_page:Number(res.per_page),current_page:Number(res.current_page)}
                this.tableData = res.data
                this.tableData.forEach(item=>{

                    if(item.asset_status_name=='在用'){ item.color = "#15BC83" }
                    if(item.asset_status_name=='报废'){ item.color = "rgb(252,46,84)" }
                    if(item.asset_status_name=='转移中'){ item.color = "#3296FA" }
                    if(item.asset_status_name=='维修中'){ item.color = "#3296FA" }
                    if(item.asset_status_name=='报废中'){ item.color = "#3296FA" }
                    if(item.asset_status_name=='退还中'){ item.color = "#3296FA" }
                    if(item.asset_status_name=='审批中'){ item.color = "#3296FA" }
                    if(item.asset_status_name=='闲置'){ item.color = "#FEE151" }
                })
                this.gettableFilters();
            })
        },
        /**表格筛选条件动态添加 */
        gettableFilters(){
            if(this.tableData.length>0){
                this.tableHeaderData[4].filters = [] 
                this.tableHeaderData[6].filters = [] 
                this.tableHeaderData[7].filters = []
                let assetStatusFilter = this.tableData.map(item=>{
                    return item.asset_status_name
                })
                let useDepartmentFilter = this.tableData.map(item=>{
                    return item.belongs_department
                })
                let assetClassFilter = this.tableData.map(item=>{
                    return item.cate_name
                })
                let assetStatusFilterSet = [...new Set(assetStatusFilter)]
                let useDepartmentFilterSet = [...new Set(useDepartmentFilter)]
                let assetClassFilterSet = [...new Set(assetClassFilter)]
                assetStatusFilterSet.map(opt=>{
                    this.tableHeaderData[4].filters.push({text: opt, value: opt})
                })
                useDepartmentFilterSet.map(opt=>{
                    this.tableHeaderData[7].filters.push({text: opt, value: opt})
                })
                assetClassFilterSet.map(opt=>{
                    this.tableHeaderData[6].filters.push({text: opt, value: opt})
                })
            }
        },
        /**跳转详情页 */
        pointerClick(item){
            this.$router.push({name:"myAssetsDetails",query:{key:item.asset_id, param: this.$route.meta.title,}})
            // this.$router.push({name:"myAssetsDetails",query:{param: this.$route.meta.title,}})
        },
    },
    created(){
        this.getAssetViewFN() 
        this.onSubmit()
    },
    mounted(){
        this.$nextTick(()=>{
            window.addEventListener('resize',this.resizeInitEcharts)
        })
    },
    destroyed() {
      window.removeEventListener('resize',this.resizeInitEcharts)
    },
}
</script>

<style lang='stylus' scoped>
.overviewOfAssets
    .echarts1 
        height 400px
        background-color #fff
        margin-bottom 20px
    .echarts2
        height 400px
        background-color #fff
    .echarts3
        height 456px
        background-color #fff
    .search
        background #fff
        border-radius 4px 4px 0 0
        padding 12px 12px 12px 0
        display flex
        justify-content flex-end
        align-items center
        >span 
            display inline-block
            width 80px
            color rgba(25, 31, 37, 1)
            font-size 14px
            font-family SourceHanSansCN-Regular
        >div
            width 200px
            display flex
            height 32px
            border-radius 4px
            background-color rgba(255, 255, 255, 1)
            border 1px solid rgba(25, 31, 37, 0.12)
            input 
                border none
    .tablePart
        background-color #fff
        padding-bottom 1px
        border-radius 4px
        padding 1px 12px 10px 12px

</style>
<style lang="stylus">
.overviewOfAssets
    .el-input__inner
        // border none
    .search
        .el-button 
            width 32px
            border none
            text-align center
            padding 0
            border-radius 0 4px 4px 0
     
</style>
